<template>
    <div class="customerIndex">
        <div class="cus-head-box">
            <div class="cus-box">
                <div class="cus-title">数据汇总</div>
                <el-button type="primary" @click="enterTheDataScreen">进入数据大屏<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </div>
            <div class="cus-statistics-list">
                <div class="cus-statistics-item" :style="{ 'background': item.color }"
                    v-for="(item, index) in statisticsList" :key="index">
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-num">{{ item.num }}</div>
                </div>
            </div>
        </div>
        <div class="echartBox">
            <div class="echartBoxLeft">
                <!-- 柱状图 -->
                <div class="histogram" v-loading="loadingHistogram">
                    <div class="cus-title">客户对接统计</div>
                    <histogram-data ref="histogramRef" class="histogramRefClass"></histogram-data>
                </div>
                <!-- 折线图 -->
                <div class="lineChart" v-loading="loadingLineChart">
                    <div class="lineChart_head">
                        <div class="lineChart_head_title">客户签约数量统计</div>
                        <!-- <div class="lineChart_head_lable">交易时间</div> -->
                        <div class="lineChart_head_right">
                            <div class="lineChart_head_time">
                                <div class="dateTimeInfoClass">
                                    <div class="infoClassItme"
                                        :class="item.id == dateTimeInfoId ? 'infoClassItmeOn' : ''"
                                        v-for="(item, index) in dateTimeInfo" :key="item.id" @click="changeItem(item)">
                                        {{ item.name }}</div>
                                </div>
                                <el-date-picker v-model="lineChartTime" type="daterange" value-format="yyyy-MM-dd"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels
                                    @change="handleTime">
                                </el-date-picker>
                            </div>
                            <!-- <div class="lineChart_head_but">
                                <el-button type="primary" @click="query">查询</el-button>
                            </div> -->
                        </div>
                    </div>
                    <line-chart-data-two class="lineChartBox" echartsId="3" ref="lineChartRef"></line-chart-data-two>
                </div>
            </div>
            <div class="echartBoxRight">
                <!-- 饼图 -->
                <pie-data ref="pieRef"></pie-data>
            </div>
        </div>
        <div class="customerService">
            <div class="customerServiceItem">
                <div class="cus-title">客户服务进度统计</div>
                <div class="customerServiceItemBox" v-loading="loadingServiceProgress">
                    <div class="cus-body-list-box cus-body" v-if="configOriginal && configOriginal.length <= 6">
                        <div class="cus-body-list cus-body-list-header">
                            <div class="cus-body-item">客户名称</div>
                            <div class="cus-body-item">服务进度</div>
                        </div>
                        <div class="cusBodyListBox" >
                            <div class="cus-body-list" v-for="(item, index) in configOriginal" :key="index">
                                <div class="cus-body-item cus-body-item-first">
                                    <span class="ellipsis_one">{{ item.clientName }}</span>
                                </div>
                                <div class="cus-body-item">
                                    <span class="ellipsis_one">{{ item.completionRate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="customerServiceBody" v-else>
                       <dv-scroll-board  class="dv-scr-board" :config="config" style="width:100%;height:100%" />
                    </div>
                </div>
            </div>
            <div class="customerServiceItem">
                <div class="cus-title">待办事项</div>
                <div class="customerServiceItemBox" v-loading="loadingWaitDispose">
                    <div class="cus-body-list-box" v-if="config1Original && config1Original.length <= 6">
                        <div class="cus-body-list cus-body-list-header">
                            <div class="cus-body-item">客户名称</div>
                            <div class="cus-body-item">客户级别</div>
                            <div class="cus-body-item">服务环节</div>
                            <div class="cus-body-item">当前责任人</div>
                            <div class="cus-body-item">当前耗时</div>
                        </div>
                        <div class="cusBodyListBox" v-if="config1Original.length > 0">
                            <div class="cus-body-list" v-for="(item, index) in config1Original" :key="index">
                                <div class="cus-body-item cus-body-item-first">
                                    <span class="ellipsis_one">{{ item.clientName }}</span>
                                </div>
                                <div class="cus-body-item">
                                    <span class="ellipsis_one">{{ item.clientLevel }}</span>
                                </div>
                                <div class="cus-body-item">
                                    <span class="ellipsis_one">{{ item.serviceItemLinkName }}</span>
                                </div>
                                <div class="cus-body-item">
                                    <span class="ellipsis_one">{{ item.nickName }}</span>
                                </div>
                                <div class="cus-body-item">
                                    <span class="ellipsis_one">{{ item.elapsedTime }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="cusBodyListBox" v-else>
                            <div class="cus-body-list">
                                <span class="noInfo">暂无信息</span>
                            </div>
                        </div>
                    </div>
                    <div class="customerServiceBody" v-else>
                        <dv-scroll-board  class="dv-scr-board" :config="config1" style="width:100%;height:100%" />
                    </div>

                </div>

            </div>
        </div>

        <data-big-screen v-if="isShowDataBigScreen" :visible.sync="isShowDataBigScreen"></data-big-screen>
    </div>
</template>

<script>
import HistogramData from "./components/histogramData";
import PieData from "./components/pieData";
import LineChartData from "./components/lineChartData";
import LineChartDataTwo from "./components/lineChartDataTwo";
import DataBigScreen from "./components/dataBigScreen";
import { getToken } from '@/utils/auth'
import {
    clientDataBoardBusiness,
    clientDataBoardCustomer,
    clientDataBoardContract,
    clientDataBoardServiceProgress,
    clientDataBoardWaitDispose
} from "@/api/customer/customerIndex";
export default {
    components: {
        HistogramData,
        PieData,
        LineChartData,
        LineChartDataTwo,
        DataBigScreen
    },
    data() {
        return {
            dateTimeInfoId: '1',
            dateTimeInfo: [
                { id: 1, name: '近七天' },
                { id: 2, name: '本月' },
            ],
            statisticsList: [
                { id: 0, name: '今日跟进客户数', color: '#FFF1F3', num: 0 },
                { id: 1, name: '昨日跟进客户数', color: '#EAF4FF', num: 0 },
                { id: 2, name: '今日已完成工单数', color: '#FAF8FF', num: 0 },
                { id: 3, name: '昨日已完成工单数', color: '#FFF8F4', num: 0 },
                { id: 4, name: '2-5天未跟进客户数', color: '#EBFFF3', num: 0 },
                { id: 5, name: '5天以上未跟进客户数', color: '#F1F6FF', num: 0 },
            ],
            lineChartTime: [], //开始时间 、结束时间
            loadingLineChart: false,
            loadingHistogram: false,
            isShowDataBigScreen: false,
            loadingServiceProgress: false,
            loadingWaitDispose: false,
            isConfigLength: false,
            isConfig1Length: false,
            configOriginal: [], //客户服务进度统计
            config1Original: [], //待办事项
            config1: {
                header: ['客户名称', '客户级别', '服务环节', '当前责任人', '当前耗时'],
                rowNum: 6, //表格行数
                headerHeight: 50,
                headerBGC: '#F9FAFF', //表头
                oddRowBGC: '#ffffff', //奇数行
                evenRowBGC: '#F9F9F9', //偶数行
                columnWidth: [387, 120, 120, 120, 120],
                align: ['left', 'center', 'center', 'center', 'center'],
                data: [
                    // ['曾记炸排骨', 'S', '组品', '王雄', '14小时'],
                    // ['成廣记养生炖汤·蒸饭·小炒（华海路店）', 'A', '组品', '赵梓茜', '13小时'],
                    // ['张家大院东北铁锅炖', 'C', '组品', '赵梓茜', '13小时'],
                    // ['组件4', 'A', '短视频', '赵梓茜', '13小时'],
                    // ['组件5', 'A', '组品', '赵梓茜', '13小时'],
                    // ['张家大院东北铁锅炖', 'A', '组品', '赵梓茜', '13小时'],
                    // ['莲寿司', 'A', '组品', '赵梓茜', '13小时'],
                    // ['常德牛肉粉', 'A', '组品', '赵梓茜', '52分钟'],
                    // ['组件9', 'A', '组品', '赵梓茜', '13小时'],
                    // ['常德牛肉粉', 'A', '组品', '赵梓茜', '13小时']
                ],
            },
            config: {
                header: ['客户名称', '服务进度'],
                rowNum: 6, //表格行数
                headerHeight: 50,
                headerBGC: '#F9FAFF', //表头
                oddRowBGC: '#ffffff', //奇数行
                evenRowBGC: '#F9F9F9', //偶数行
                columnWidth: [440, 117],
                align: ['left', 'center'],
                data: [
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],
                //   ['曾记炸排骨', 'S'],

                ],

            },
        }
    },
    created() {
        this.getTimeSevenDays() // 获取本月时间
        this.getClientDataBoardBusiness() //数据汇总
        this.getClientDataBoardCustomer() //客户对接统计
        this.getClientDataBoardContract() //客户签约数量统计
        this.getClientDataBoardServiceProgress() // 客户服务进度统计
        this.getClientDataBoardWaitDispose() //待办事项
    },
    methods: {
        // 获取本月时间
        getCurrentTime() {
            this.$set(this.lineChartTime, 0, this.getTime(1)); // 当月第一天
            this.$set(this.lineChartTime, 1, this.getTime()); //当天
        },
        // 默认近七天
        getTimeSevenDays(){
            this.$set(this.lineChartTime, 0, this.getDay(-7)); // 近七天
            this.$set(this.lineChartTime, 1, this.getDay(0)); //当天
        },
        // 进入数据大屏
        enterTheDataScreen() {
            // let url = 'http://192.168.0.112:8080/client/screen/?token=' + getToken()
            let url = process.env.VUE_APP_CUSTOM_URL + '/client/screen/?token=' + getToken()
            window.open(url, '_blank');
            // this.isShowDataBigScreen = true
        },
        getTime(index = '') {
            // 获取Date()对象
            let date = new Date()
            // 获取当前事件的年份转为字符串
            let year = date.getFullYear().toString()
            // 获取月份，注意：月份默认从0开始，所以要+1
            let month =
                date.getMonth() + 1 < 10
                    ? '0' + (date.getMonth() + 1).toString()
                    : (date.getMonth() + 1).toString()
            // 获取天，
            let day =
                date.getDate() < 10
                    ? '0' + date.getDate().toString()
                    : date.getDate().toString()
            // 获取时
            let hour = date.getHours().toString()
            // 获取分
            let minute = date.getMinutes().toString()
            // 获取秒
            let second = date.getSeconds().toString()
            // 拼接时间
            // 例如：1号：00:00:00，当日：当前时间
            // 举例：2022-09-01 00:00:00   2022-09-29 13:39:29
            let begin = year + '-' + month + '-01' // 当月第一天
            let end = year + '-' + month + '-' + day // 当天
            if (index == 1) {
                return begin
            } else {
                return end
            }
            // 例如：1号：00:00:00 当日：23:59:59
            // 举例：2022-09-01 00:00:00   2022-09-29 23:59:59
            // let begin = year + '-' + month + '-01' + ' 00:00:00' // 当月第一天
            // let end = year + '-' + month + '-' + day + ' 23:59:59' // 当天
        },
        //商务数据统计
        async getClientDataBoardBusiness() {
            var res = await clientDataBoardBusiness()
            let result = res.result
            this.statisticsList[0].num = result.todayClientNum
            this.statisticsList[1].num = result.yesterdayClientNum
            this.statisticsList[2].num = result.todayFinishServiceItem
            this.statisticsList[3].num = result.yesterdayFinishServiceItem
            this.statisticsList[4].num = result.notFollowClient2
            this.statisticsList[5].num = result.notFollowClient5
        },
        // 客户对接统计
        async getClientDataBoardCustomer() {
            this.loadingHistogram = true
            try {
                var res = await clientDataBoardCustomer()
                let result = res.result
                this.$nextTick(() => {
                    this.loadingHistogram = false
                    this.$refs.histogramRef.getDataList(result)
                })
            } catch (error) {
                this.loadingHistogram = false
            }

        },
        // 查询 折线图查询
        query() {
            // console.log('this.date',this.date)
            if (this.lineChartTime) {
                this.getClientDataBoardContract()
            } else {
                this.$message.error('请选择签约数量统计时间')
            }
        },
        // 本月、近七天
        changeItem(item) {
            this.dateTimeInfoId = item.id
            if(this.lineChartTime == null){
                this.lineChartTime = []
            }
            if (this.dateTimeInfoId == 1) {
                this.$set(this.lineChartTime, 0, this.getDay(-7)); // 近七天
                this.$set(this.lineChartTime, 1, this.getDay(0)); //当天
            } else if (this.dateTimeInfoId == 2) {
                this.getCurrentTime() //本月
            }
            this.getClientDataBoardContract()
        },
        // 时间切换
        handleTime(e) {
            if (this.lineChartTime) {
                this.dateTimeInfoId = ''
                this.getClientDataBoardContract()
            } else {
                this.$message.error('请选择客户对接统计时间')
            }

        },
        // 折线图交易数据汇总
        getClientDataBoardContract() {
            this.loadingLineChart = true
            let data = {
                beginTime: this.lineChartTime[0],
                endTime: this.lineChartTime[1],
            }
            //用户数量和商家数量
            clientDataBoardContract(data).then((res) => {
                this.$nextTick(() => {
                    this.loadingLineChart = false
                    let result = res.result
                    this.$refs.lineChartRef.getDataList(result)
                })
            }).catch(error => {
                this.loadingLineChart = false
            })
        },
        // 客户服务进度统计
        getClientDataBoardServiceProgress() {
            this.loadingServiceProgress = true
            clientDataBoardServiceProgress().then((res) => {
                this.loadingServiceProgress = false
                let result = res.result
                this.configOriginal = result

                let config = {
                    header: ['客户名称', '服务进度'],
                    rowNum: 6, //表格行数
                    headerHeight: 50,
                    headerBGC: '#F9FAFF', //表头
                    oddRowBGC: '#ffffff', //奇数行
                    evenRowBGC: '#F9F9F9', //偶数行
                    columnWidth: [440, 117],
                    align: ['left', 'center'],
                    data: [],
                }
                let arrlist = []
                result.forEach(element => {
                    let obj = []
                    obj.push(element.clientName)
                    obj.push(element.completionRate)
                    arrlist.push(obj)
                });
                config.data = arrlist
                this.config = config
            }).catch(error => {
                this.loadingServiceProgress = false
            })
        },
        // 待办事项
        getClientDataBoardWaitDispose() {
            this.loadingWaitDispose = true
            clientDataBoardWaitDispose().then((res) => {
                this.loadingWaitDispose = false
                let result = res.result
                this.config1Original = result
                let config = {
                    header: ['客户名称', '客户级别', '服务环节', '当前责任人', '当前耗时'],
                    rowNum: 6, //表格行数
                    headerHeight: 50,
                    headerBGC: '#F9FAFF', //表头
                    oddRowBGC: '#ffffff', //奇数行
                    evenRowBGC: '#F9F9F9', //偶数行
                    columnWidth: [387, 120, 120, 120, 120],
                    align: ['left', 'center', 'center', 'center', 'center'],
                    data: [],
                }
                let arrlist = []
                result.forEach(element => {
                    let obj = []
                    obj.push(element.clientName)
                    obj.push(element.clientLevel)
                    obj.push(element.serviceItemLinkName)
                    obj.push(element.nickName)
                    obj.push(element.elapsedTime)
                    arrlist.push(obj)
                });
                config.data = arrlist
                this.config1 = config
                // console.log('this.config1', this.config1)
            }).catch(error => {
                this.loadingWaitDispose = false
            })
        },
        // getDay(0);//当天日期  年-月-日
        // getDay(-7);//7天前日期  年-月-日
        getDay(day) {
            var today = new Date();
            var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = this.doHandleMonth(tMonth + 1);
            tDate = this.doHandleMonth(tDate);
            return tYear + "-" + tMonth + "-" + tDate;
        },
        doHandleMonth(month) {
            var m = month;
            if (month.toString().length == 1) {
                m = "0" + month;
            }
            return m;
        }
    }
}
</script>

<style scoped>
.customerIndex {
    padding: 40px;
}

.cus-head-box {
    width: 100%;
    padding: 12px 38px 25px 30px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 14px;
    margin-bottom: 30px;
}

.cus-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cus-title {
    color: #222222;
    font-size: 20px;
    font-weight: bold;
}

.cus-statistics-list {
    width: 100%;
    margin-top: 20px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

.cus-statistics-item {
    width: 226px;
    box-sizing: border-box;
    padding: 14px 24px 18px 24px;
    border-radius: 10px;
    background: #ffffff;
    margin-right: 30px
}

.cus-statistics-item:last-child {
    margin-right: unset;
}

.item-name {
    font-size: 14px;
    color: #747474;
    margin-bottom: 20px;
}

.item-num {
    font-size: 36px;
    color: #222222;
}

.echartBox {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.echartBoxLeft {

    flex: 1;
    width: 0;
    margin-right: 30px;
    /* flex-direction: ; */
}

.echartBoxRight {
    width: 633px;
    margin-bottom: 30px
}

.pie {
    width: 100%;

}

/* 表格统计 */
.lineChart {
    width: 100%;
    height: 464px;
    padding-top: 16px;
    /* padding: 15px 30px; */
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

.lineChart_head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.lineChart_head_title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-right: 15px;
}

.lineChart_head_lable {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-right: 13px;
}

.lineChart_head_right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lineChart_head_time {
    margin: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lineChart_head_time /deep/ .el-date-editor .el-range-input {
    color: #798599;
    line-height: 25px;
}

.lineChart_head_time /deep/ .el-date-editor .el-range__icon {
    color: #ACBAD2;
}

.lineChart_head_time /deep/ .el-date-editor .el-range-separator {
    line-height: 26px;
}

.dateTimeInfoClass {
    display: flex;
    flex-direction: row;
    border: 1px solid #387CFF;
    width: fit-content;
    border-radius: 4px;
    margin-right: 10px;
}

.infoClassItme {
    width: 50px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #387CFF;
    font-size: 12px;
    cursor: pointer;
}

.infoClassItme:first-child {
    border-right: 1px solid #387CFF;
}

.infoClassItmeOn {
    background: #387CFF;
    color: #ffffff;
}

 .lineChart_head /deep/ .el-date-editor {
    height: 32px;
    width: 260px
}

 .lineChart_head /deep/ .el-button {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* line-height: 32px; */
}

.lineChart_head_but {
    margin-left: 20px;
}

.lineChartBox {
    flex: 1;
    height: 0;
}

.histogram {
    width: 100%;
    height: 464px;
    padding-top: 17px;
    margin-bottom: 30px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.histogram .cus-title {
    padding-left: 30px;
    margin-bottom: 15px;

}

.histogramRefClass {
    flex: 1;
    height: 0;
}

.customerService {
    display: flex;
    flex-direction: row;
}

.customerServiceItem {
    width: 617px;
    height: fit-content;
    padding: 17px 30px 30px 30px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.customerServiceItem:nth-child(2) {
    flex: 1;
    width: 0;
    margin-left: 40px
}

/* 待办事项、客户服务进度统计 */
.cus-body-list-box {
    border: 1px solid #D8DAE3;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.cus-body-list-box .cus-body-list {
    height: 50px;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #DEE1EC;
}

.cus-body-list-box .cus-body-list-header {
    background: #F9FAFF;
    color: #222222;
    font-size: 16px;
    font-weight: bold;
}
.cus-body-list-box .cus-body-list:nth-child(2n) {
        background: #F9F9F9;
}
.cus-body-item:first-child {
    width: 0;
    flex: 1;
    padding: 0 30px;
    
    box-sizing: border-box;
}
.ellipsis_one{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cus-body-item {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #DEE1EC;
}

.cus-body-item:last-child {
    border-right: unset;
}

.cus-body-item-first {
    justify-content: flex-start;
}

.noInfo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* end */
.customerServiceBody {
    height: 350px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #D8DAE3;
    overflow: hidden;
}
.customerServiceBody /deep/ .header {
    color: #222222;
    font-size: 16px;
    font-weight: bold;
}

.customerServiceBody /deep/ .rows .row-item {
    color: #333333;
    font-size: 14px;
}

.customerServiceBody /deep/ .rows .row-item .ceil:first-child,
.customerServiceBody /deep/ .header .header-item:first-child
 {
    padding: 0 30px;
    
}

.customerServiceBody /deep/ .header .header-item:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.customerServiceBody /deep/ .header,
.customerServiceBody /deep/ .rows .row-item {
    border-bottom: 1px solid #DEE1EC;
}

.customerServiceBody /deep/ .rows .row-item:last-child {
    border-bottom: unset;
}

.customerServiceBody /deep/ .header .header-item,
.customerServiceBody /deep/ .rows .row-item .ceil {
    border-right: 1px solid #DEE1EC;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
.customerServiceBody /deep/ .rows .row-item .ceil:first-child{
    justify-content: flex-start;
} 
.customerServiceBody /deep/ .header .header-item:last-child,
.customerServiceBody /deep/ .rows .row-item .ceil:last-child {
    border-right: unset;
    
}

.no-info /deep/ .rows .row-item .ceil {
    border-right: unset;
    width: 100% !important;
    text-align: center;
}

.no-info /deep/ .rows .row-item {
    border-bottom: unset;
}
</style>